<template>
    <div class="container">
        <div class="nav-container">
            <div class="nav-logo">
                <span class="nav-logo-img"></span>
                <span class="nav-logo-title"></span>
            </div>

            <div class="nav-menu">
                <div class="nav-menu-item" v-for="(menu_item, index) in menu_items" @click="menuItemClicked(index)"
                    :class="{ 'active': menu_items_activated == index }">
                    <svg class="nav-menu-item-icon iconfont" aria-hidden="true"
                        v-bind:style="isActive(index) ? { fill: '#87cefa' } : { fill: '#ffffff' }">
                        <use v-bind:xlink:href="`#icon-${menu_item.icon}`"></use>
                    </svg>
                    <p class="nav-menu-item-text">
                        {{ menu_item.text }}
                    </p>
                </div>
            </div>

            <div class="nav-line"></div>
            <div class="nav-search">
                <div class="nav-search-box">
                    <input type="text" class="nav-search-input" placeholder="输入内容">
                    <button type="button" class="nav-search-button">搜索</button>
                </div>
            </div>
            <div class="nav-line"></div>
            <div class="nav-login">
                <button @click="handleLogin">BACK</button>
            </div>
        </div>
        <div class="main-container">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
import router from '@/router';

export default {
    name: 'Main',
    components: {
    },
    watch: {
    },
    data() {
        return {
            menu_items_activated: 0,
            menu_items: [
                {
                    icon: 'library',
                    text: '书圈',
                },
                {
                    icon: 'posts',
                    text: '帖子',
                },
                {
                    icon: 'bookshelf',
                    text: '书架',
                },
                {
                    icon: 'cardnote',
                    text: '笔记',
                },
                {
                    icon: 'community',
                    text: '社区',
                },
            ],
        };
    },
    mounted() {
    },
    methods: {
        isActive(index) {
            return this.menu_items_activated === index;
        },
        menuItemClicked(index) {
            this.menu_items_activated = index;
            if (index === 0) {
                this.$router.push('/main/library');
            } else if (index === 1) {
                this.$router.push('/main/posts');
            } else if (index === 2) {
                this.$router.push('/main/bookshelf');
            } else if (index === 3) {
                this.$router.push('/main/cardnote');
            } else if (index === 4) {
                this.$router.push('/main/community');
            } else {
                // 可以在这里处理未定义索引的情况
                console.log('Index out of range');
            }
        },
    },

}
</script>
<style scoped>
.container {
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
}

.nav-container {
    width: 100vw;
    height: 10vh;
    display: flex;
    background: none;
    background-color: #87cefa;
}

.nav-logo {
    width: 20vw;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
    padding-left: 2vw;
    cursor: pointer;
}

.nav-logo-img {
    width: 50%;
    height: 100%;
    background-image: url('@/assets/img/home/logo_img.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.nav-logo-title {
    width: 50vw;
    height: 9vh;
    background-image: url('@/assets/img/home/logo_title.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.nav-menu {
    width: 24vw;
    height: 100%;
    display: flex;
    margin-left: -7vw;
}

.nav-menu-item {
    margin-right: 1vw;
    height: 9vh;
    width: 2.8vw;
    margin-top: 1vh;
    transition: .3s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nav-menu-item.active {
    width: 4vw;
    background-color: white;
    border-radius: 50%;
}

.nav-menu-item svg.active {
    fill: red;
}

.nav-menu-item-icon {
    width: 120%;
    height: 120%;
}


.active .nav-menu-item_icon {
    transform: translate(0, -10px);

}

.nav-menu-item-text {
    height: 1vh;
    width: 2vw;
    color: #24a1ef;
}

.nav-search {
    width: 50vw;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-search-box {
    width: 40vw;
    display: flex;
    align-items: center;
    border: 2px solid #ccc;
    border-radius: 24px;
    padding: 5px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 10px;

}

.nav-search-input {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 16px;
    color: #333;
}

.nav-search-button {
    padding: 10px 20px;
    background-color: #87cefa;
    color: white;
    border: none;
    border-radius: 0 24px 24px 0;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}


.nav-search-button:hover {
    background-color: #0056b3;
}

.nav-line {
    margin: auto 1vw;
    height: 70%;
    width: 1vw;
    position: relative;
    overflow: hidden;
}

.nav-line::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.2vw;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
    background-size: 0.2vw 100%;
    background-repeat: no-repeat;
    margin-right: -0.5vw;
}



.nav-login {
    margin-top: 2vh;
    height: 8vh;
    width: 16vw;
}

@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon');

.nav-login button {
    width: 100%;
    height: 80%;
    border-radius: 15vw;
    font-family: 'Do Hyeon';
    font-size: 2.5em;
    font-weight: bolder;
    cursor: pointer;
    transition: 0.5s ease;
    color: white;
    background: none;

    &:hover {
        transform: scale(1.1);
    }
}

.main-container {
    width: 100vw;
    height: 90vh;
    padding: 0;
    margin: 0;
}
</style>